<template>
  <div class="social-securitys-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        社保管理
        <div>
          复习: v-model 绑定 checkbox 的特殊情况
          <div>
            <!--
              复选框 v-model 绑定数据的类型分为两种:
              1. 非数组, 默认会转为 boolean, 绑定的是 checked 属性
              2. 数组, 将用户勾选的复选框对应的 value 值放入数组中
             -->
            <input v-model="flag" type="checkbox">全选

            <p>刘狄威的兴趣爱好:</p>
            <input v-model="arr" value="smoke" type="checkbox">抽烟
            <input v-model="arr" value="drink" type="checkbox">喝酒
            <input v-model="arr" value="hotHead" type="checkbox">烫头
            <input v-model="arr" value="spa" type="checkbox">按摩
            <input v-model="arr" value="playPoker" type="checkbox">打牌
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 123,
      arr: []
    }
  }
}
</script>
